<template>
	<z-paging ref="paging" key="home" v-model="dataList" @query="queryList" :empty-view-center="false" :hide-no-more-by-limit="10">
		<template v-slot:top>
			<view class="searchBox">
				<uni-search-bar placeholder="搜索商品名称、卸车地点" @input="(e) => queryList(null, null, e)"></uni-search-bar>
			</view>
		</template>
		<view class="box">
			<view v-for="(item, ins) in dataList" :key="ins">
				<view>
					<view :class="['container', 'conLines']" :key="adinx">
						<view class="con">
							<uni-collapse>
								<uni-collapse-item title-border="none" :border="false">
									<template #title>
										<view class="collapseTitle">
											<u-tag style="min-width: 180rpx; text-align: center" :text="formatDate(item.dateTime)" size="mini"></u-tag>
											<view class="collapseTitleText">{{ item.addrName }} ({{ item.vehicleNeeds.length }}条)</view>
										</view>
									</template>

									<view class="collapseBody">
										<view class="collBodyItem" v-for="(data, dinx) in item.vehicleNeeds">
											<view>{{ data.loadingAddress }} - {{ data.unloadAddress }} - {{ data.freightPrice / 1000 }}</view>
											<view class="reportBtn" @click="navTo(`/pages/logisticsCompany/index/home/carReport/carReport`, { data })">填报</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import http from '@/common/request.js';
import { onLoad, onUnload, onShow, onHide, onReady } from '@dcloudio/uni-app';
import { navTo } from '@/common/utils';
import { getList } from '@/api/logisitcsCompany';
import { forIn } from 'lodash';

const dataList = ref([]);
const paging = ref(null);
const cache = {};
const cacheData = ref({});
const queryList = (pageNumber, pageSize, filterText) => {
	if (pageNumber) {
		cache.pageNumber = pageNumber;
		cache.pageSize = pageSize;
	} else {
		cache.filterText = filterText;
	}
	getList(cache).then((res) => {
		// 只存储key
		paging.value.complete(res.data);
	});
};

const formatDate = (dateString) => {
	const dateParts = dateString.split('-');
	const year = dateParts[0];
	const month = parseInt(dateParts[1], 10);
	const day = parseInt(dateParts[2], 10);
	return `${year}年${month}月${day}日`;
};

onLoad(() => {
	uni.$on('updatestaff', queryList);
});

onUnload(() => {
	uni.$off('updatestaff', queryList);
});

onMounted(() => {});
</script>

<style scoped lang="scss">
.conLines {
	border-bottom: 6rpx solid #f8f8f8;
}

.searchBox {
	padding: 10rpx;
	// border: 1rpx solid red;
}

.container {
	padding: 20rpx 30rpx;

	.shopType {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.circle {
			margin-right: 10rpx;
			font-size: 24rpx;
			display: flex;
			width: 40rpx;
			height: 40rpx;
			background-color: #51a9ec;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			color: #fff;
		}
	}

	.con {
		display: flex;
		flex-direction: column;
		// border: 1rpx solid red;
		background-color: #fff;

		.conRow {
			display: flex;
		}

		.item {
			flex: 1;
			padding: 10rpx 0;
			// border: 1px solid red;
			display: flex;
			justify-content: space-between;

			.type {
				color: #bdbdbd;
				font-size: 26rpx;
			}

			.unit {
				font-size: 23rpx;
			}

			.rightBox {
				display: flex;
				align-items: center;

				.text {
					font-weight: 500;
					font-size: 26rpx;
					width: 500rpx;
					text-align: right;
				}

				.img {
					width: 35rpx;
					height: 35rpx;
					margin-left: 10rpx;
				}
			}
		}

		.collapseTitle {
			display: flex;
			align-items: center;
			padding: 10rpx 0;

			.collapseTitleText {
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}

		.collapseBody {
			.collBodyItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #5d5d5d;
				height: 60rpx;

				.reportBtn {
					color: #51a9ec;
				}
			}
		}
	}
}
</style>
